<template>
	<view class="u-page-content">
		<u-navbar leftText=" " title=" " :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left" @click="left">
				<u-icon name="arrow-left" color="#000000" size="16" :bold="true"></u-icon>
			</view>

		</u-navbar>
		<!-- <image class="bg-c" src="../../static/images/bg-c.png"></image> -->
		<view class="sign-up-title-c">
			<image class="bg1-l" src="../../static/images/left.png" mode="aspectFill"></image>
			<image class="bg2-2" src="../../static/images/right.png" mode="aspectFill"></image>
			<view class="sign-up-title-item">
				请完成您的身份采集
			</view>
			<!-- <view class="sign-up-title-tips">
				给你推荐年龄适配的Ta
			</view> -->
		</view>
		<u-form :model="form" ref="uForm">
			<u-form-item prop="name">
				<view class="u-f-jsb u-f-ac" style="justify-content: space-between;display: flex;align-items: center;">
					<u-input type="text" shape="circle" v-model="form.name" placeholder="请输入姓名" height="100" />
					<button  class="codeBtn u-f-ajc"
						style="display: flex;align-items: center; color: rgba(65, 92, 158, 0.9);" type="default"
						@tap="encryptionNameClick">快捷输入[·]</button>
				</view>
			</u-form-item>

			<u-form-item prop="idcard">
				<u-input type="idcard" shape="circle" v-model="form.idcard" placeholder="请输入身份证号码" height="100" />
			</u-form-item>
			<u-form-item prop="phone">
				<view class="u-f-jsb u-f-ac" style="justify-content: space-between;display: flex;align-items: center;">
					<u-input style="width: 350rpx;" type="number" shape="circle" maxlength="11" v-model="form.phone"
						placeholder="请输入手机号码" height="100" />
					<button class="codeBtn u-f-ajc"
						style="display: flex;align-items: center;color: rgba(65, 92, 158, 0.9);" type="default"
						@tap="getcode">{{!time?'获取验证码':'重新获取'+time+'s'}}</button>
				</view>
			</u-form-item>
			<u-form-item prop="code">
				<u-input maxlength="6" type="number" shape="circle" v-model="form.code" placeholder="请输入手机验证码"
					height="100" />
			</u-form-item>
		</u-form>
		<view class="to-btn" @click="stepToNext">
			下一步
		</view>
		<ELM ref="elm" :msg="tipMsg"></ELM>
	</view>
</template>

<script>
	var _self;
	import common from "@/common/common.js"
	import ELM from '../../components/elm-toast/index.vue';
	import {
		sendPhoneCode,
		validatePhoneCode
	} from '@/common/api.js';

	export default {
		components: {
			ELM
		},
		data() {
			return {
				s_openId: '',
				s_globalUrl: '',
				s_appKey: '',
				s_hosCode: '',
				s_type: '',
				s_name: '',
				s_idcard: '',
				time: 0,
				name: '',
				idno: '',
				action: 'https://minipro.xiaonuo.vip/sysFileInfo/upload',
				multipleImgs: [], // 多张图片
				sizeType: ['compressed'],
				mpIssueFileParamList: [],
				idcardPositiveBase64: '',
				idcardBackBase64: '',
				idcardPositiveImgUrl: '',
				idcardBackImgUrl: '',
				IS_ENABLED_OCR: '',
				REAL_NAME_METHOD: '',
				COLLECT_INFO_ITEMS: '',
				IS_HOSPITAL_REAL_NAME: '',
				form: {
					name: '',
					idcard: '',
					phone: '',
					code: ''
				},
				rules: {
					name: [{

						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']

					}],
					idcard: [{
							type: 'string',
							required: true,
							message: '请填写身份证号码',
							trigger: ['blur', 'change']
						},
						// 自定义验证函数，见上说明
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// _self.$u.test.mobile()就是返回true或者false的
								return common.checkIdcard(value);
								// return RegExp(
								// 	/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
								// ).test(value);
							},
							message: '身份证号码有误',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur']
						}
					],
					phone: [{
							required: true,
							message: '请输入您的手机号',
							trigger: ['change', 'blur'],
						},
						{
							min: 11,
							max: 11,
							message: '请您正确输入手机号',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// _self.$u.test.mobile()就是返回true或者false的
								return _self.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						},
						{
							pattern: '^[0-9]*$',
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '手机号码只能输入数字',
							trigger: ['change', 'blur']
						}
					],
					code: [{
							max: 6,
							min: 4,
							message: '验证码为4到6位',
							trigger: 'change'
						},
						{
							required: true,
							message: '请填写验证码',
							trigger: ['change', 'blur'],
							type: "number"
						},
						{
							pattern: '^[0-9]*$',
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '验证码只能输入数字',
							trigger: ['change', 'blur']
						}
					]
				},
				gender: '',
				birthday: '',
				height: '',
				weight: '',
				education: '',
				income: '',
				deptId: '',
				tipMsg: '',
				starTime: '',
				msg: '',
			}
		},
		onReady() {
			_self.$refs.uForm.setRules(_self.rules);
		},
		onLoad(options) {
			_self = this;
			console.log('options = ', options);
			_self.birthday = options.birthday;
			_self.gender = options.gender;
			_self.height = options.height;
			_self.weight = options.weight;
			_self.education = options.education;
			_self.income = options.income;
			_self.deptId = options.deptId;
		},
		methods: {
			left() {
				uni.navigateBack()
			},
			encryptionNameClick() {
				_self.form.name = _self.form.name + '·';
			},
			/* 获取手机验证码 */
			getcode() {

				if (common.checkMobile(_self.form.phone)) {
					if (_self.time > 0) {

						_self.tipMsg = '不能重复获取';
						_self.$refs.elm.showDialog();
						return;
					} else {
						sendPhoneCode({
							phone: _self.form.phone,
						}).then(res => {
							console.log('res', res);
							if (res.code == 200) {
								_self.starTime = res.data.starTime;
								_self.msg = res.data.msg;
								_self.time = 60;
								let timer = setInterval(() => {
									_self.time--;
									if (_self.time < 1) {
										clearInterval(timer);
										_self.time = 0;
									}
								}, 1000)
							} else {
								_self.tipMsg = res.msg;
								_self.$refs.elm.showDialog();
								return;
							}
						}).catch(() => {

						});

					}
				} else {
					_self.tipMsg = '手机号有误';
					_self.$refs.elm.showDialog();
					return;
				}
			},

			/* 手机号验证 */
			stepToNext() {
				// uni.navigateTo({
				// 	url: '/pageslogin/index/avatar?gender=' + _self.gender + '&birthday=' + _self.birthday +
				// 		'&height=' + _self.height + '&weight=' + _self.weight + '&education=' + _self.education +
				// 		'&income=' + _self.income + '&deptId=' + _self.deptId + '&name=' + _self.form.name +
				// 		'&idcard=' + _self.form.idcard + '&phone=' + _self.form.phone
				// })

				this.$refs.uForm.validate().then(res => {
					validatePhoneCode({
						starTime: _self.starTime,
						msg: _self.msg,
						phone: _self.form.phone,
						endCode: _self.form.code,
						userPhone: _self.form.phone
					}).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '/pageslogin/index/marryDate?gender=' + _self.gender +
									'&birthday=' + _self
									.birthday +
									'&deptId=' + _self.deptId + '&name=' + _self.form.name +
									'&idcard=' + _self.form.idcard + '&phone=' + _self.form
									.phone
							})
						} else {
							_self.tipMsg = res.msg;
							_self.$refs.elm.showDialog();
							return;
						}

					}).catch({

					})

				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style>
	.u-page-content {
		margin-left: 3%;
		margin-right: 3%;
		background-color: #FFFFFF;
		width: 94%;
	}

	.u-page {
		margin-top: 25rpx;
	}

	.content>view {
		margin-top: 150rpx;
	}

	.inputbox {
		margin-top: 100rpx;
	}

	.inputbox image {
		margin-top: 10rpx;
	}

	.line {
		background: #3BA794;
		width: 500rpx;
		height: 1rpx;
		margin-top: 1rpx;
	}

	.codeBtn {
		width: 200rpx;
		height: 80rpx;
		white-space: nowrap;
		background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		text-align: center;
		line-height: 84rpx;
		margin: auto;
		color: rgba(65, 92, 158, 0.9);
		font-weight: 400;
		font-size: 28rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
	}

	.inputbox-write {
		margin-top: 1rpx;
		margin-left: 10rpx;
		/* padding-bottom: 10rpx; */
	}

	.inputbox>view:last-child {
		margin-top: 50rpx;
	}

	.loginbtn {
		margin-top: 65rpx;
	}

	.camera-ocr {
		background: #3BA794;
		color: #FFFFFF;
		width: 300rpx;
		margin-left: 250rpx;
		margin-top: 20rpx;
	}

	.idcard-positive {
		margin-top: 30rpx;
		margin-right: 3%;
		margin-left: 3%;
		width: 94%;
		height: 300rpx;
	}

	.idcard-positive-upload {
		margin-right: 1rpx;
		margin-left: 1rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background: rgb(244, 245, 246); */
		border-radius: 10rpx;
	}

	.idcard-back {
		margin-top: 30rpx;
		margin-right: 3%;
		margin-left: 3%;
		width: 94%;
		height: 300rpx;
	}

	.idcard-back-upload {
		margin-right: 1rpx;
		margin-left: 1rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background: rgb(244, 245, 246); */
		border-radius: 10rpx;
	}

	.upload {
		margin-top: 50rpx;
		/* width: 500rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.phone {
		margin-top: 50rpx;
		margin-left: 3%;
	}

	.to-btn {
		width: 536rpx;
		height: 84rpx;
		background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		text-align: center;
		line-height: 84rpx;
		margin: auto;
		color: rgba(65, 92, 158, 0.9);
		font-weight: 400;
		position: fixed;
		bottom: 15vh;
		left: 112rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
	}

	.bg-c {
		width: 100%;
		height: 80vh;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.sign-up-title-c {
		position: relative;
		width: 500rpx;
		height: 200rpx;
		margin: auto;
		margin-top: 52rpx;
		box-sizing: content-box;
		overflow: hidden;
		color: #333;
	}

	.bg1-l {
		position: absolute;
		top: 0rpx;
		left: 20rpx;
		width: 95rpx;
		height: 85rpx;
	}

	.bg2-2 {
		position: absolute;
		top: 66rpx;
		right: 0;
		width: 83rpx;
		height: 60rpx;
	}

	.sign-up-title-item {
		font-size: 48rpx;
		font-family: 'SourceHanSerifCN-Heavy';
		text-align: center;
		margin-top: 66rpx;
		color: rgba(45, 49, 50, 0.9);
	}

	.sign-up-title-tips {
		text-align: center;
		font-weight: 400;
		margin-top: 24rpx;
		color: #666;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-size: 24rpx
	}
</style>